import React from 'react'
import {
  Input, 
  Layout, 
  Menu,
  Button,
  Dropdown,
  message,
  Icon  
} from 'antd';
import { logout } from "../../api/index"
import { Link } from "react-router-dom"
import "./header.scss"
const { Header } = Layout;
const Search = Input.Search;

export default class WyyHeader extends React.Component {
 
  constructor() {
    super()
    this.state = {
      id:localStorage.getItem('id') || null
    }
  }

  handleMenuClick = (e)=>{
   
    console.log('click', e);
    this.props.loginFn(e.key,true)
  }
  menuInfo = (e) => {
    if(e.key === "exit"){
      logout().then(data=>{
        console.log(data)
        if(data.code === 200 ){
          message.success('退出成功');
          localStorage.removeItem('id')
          this.setState({
            id:null
          })
        }
      })
      
    }
  }

  render() {
    const menuInfo = (
      <Menu theme="dark"  onClick={this.menuInfo} style={ { background:"#242424",fontSize:"12px" } }>
        <Menu.Item><Icon type="user" />我的主页</Menu.Item>
        <Menu.Item><Icon type="mail" />我的消息</Menu.Item>
        <Menu.Item><Icon type="crown" />我的等级</Menu.Item>
        <Menu.Item><Icon type="radar-chart" />vip会员</Menu.Item>
        <Menu.Item><Icon type="setting" />个人设置</Menu.Item>
        <Menu.Item><Icon type="solution" />实名认证</Menu.Item>
        <Menu.Item key="exit"><Icon type="export" />退出</Menu.Item>
      </Menu>
    );
    const menu = (
      <Menu theme="dark" onClick={this.handleMenuClick} style={ { background:"#242424",fontSize:"12px" } }>
        <Menu.Item key="手机号"><Icon type="user" />手机号登录</Menu.Item>
        <Menu.Item key="QQ"><Icon type="qq" />QQ登录</Menu.Item>
        <Menu.Item key="微信"><Icon type="wechat" />微信登录</Menu.Item>
        <Menu.Item key="微博"><Icon type="weibo-circle" />微博登录</Menu.Item>
      </Menu>
    );
    const selectK = window.location.hash.split('#')[1] //location.hash
    return <div id="wyy_header">
      <Layout className="layout">
        <Header>
          <div className="header_main">
            <div className="logo" />
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={[selectK]}
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="/find/recmd"><Link to="/find">发现音乐</Link></Menu.Item>
              <Menu.Item key="/mymusic"><Link to="/mymusic">我的音乐</Link></Menu.Item>
              <Menu.Item key="/firends"><Link to="/firends">朋友</Link></Menu.Item>
              <Menu.Item key="/shopping"><Link to="/shopping">商城</Link></Menu.Item>
              <Menu.Item key="/musician"><Link to="/musician">音乐人</Link></Menu.Item>
              <Menu.Item key="/down"><Link to="/down">下载客户端</Link></Menu.Item>
            </Menu>
            { localStorage.getItem('id')? 
            <Dropdown overlay={menuInfo}>
              <Button style={{ marginLeft: 8 }}>
                登陆成功 <Icon type="down" />
              </Button>
            </Dropdown>:
            <Dropdown overlay={menu}>
              <Button style={{ marginLeft: 8 }}>
                登录 <Icon type="down" />
              </Button>
            </Dropdown>}
            
            <Button>创作者中心</Button>
            <Search
              className="search"
              placeholder="音乐/电台/视频/用户"
              onSearch={value => console.log(value)}
              style={{ width: 200 }}
            />
            
          </div>
          
        </Header>
      </Layout>
    </div>
  }
}
